<template>
  <el-row :gutter="24">
    <el-col :span="1" @click="changeCollapse" class="leftIcon">
      <MenuFoldOne theme="outline" size="30" fill="#1482f0" v-show="isCollapse"/>
      <MenuUnfoldOne theme="outline" size="30" fill="#333" v-show="!isCollapse"/>
    </el-col>
    <el-col :span="19" class="center_content">
      <!--  头部内容    -->
      <Breadcrumb/>
    </el-col>
    <el-col :span="4" class="right">
      <el-dropdown placement="bottom-end" trigger="click">
        <el-avatar :size="50" :src="headImg"/>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-link href="/userProfile">
                个人中心
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item disabled>Action 2</el-dropdown-item>
            <el-dropdown-item>
              <el-link href="https://gitee.com/chun_xiang_zheng/vue3_ts.git" target="_blank">
                项目地址
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link href="https://panjiachen.gitee.io/vue-element-admin/" target="_blank">
                参考项目
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="outLogin">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import Breadcrumb from "@/components/breadcrumb.vue";

import {computed} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const headImg=require('@/assets/Avatar/administrator.gif')

const isCollapse = computed(() => store.getters.isCollapse)
const changeCollapse = () => {
  store.commit("isCollapse")
}
const outLogin = () => {
  router.push({path: "/login"})
}
</script>

<style scoped lang="less">
.el-row {
  height: 100%;
  background-color: white;

  .el-col {
    height: 100%;
    border-radius: 4px;
  }

  .leftIcon {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .center_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

  }
}
</style>
